<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible" @open="open">
    <el-form
      ref="formRef"
      :model="formData"
      label-width="auto"
      v-loading="formLoading"
    >
      <el-form-item label="申请编号:" prop="applyCode">
        {{ formData.applyCode }}
      </el-form-item>
      <el-form-item label="申请人:" prop="applyUserId">
        {{ applyUserList.find(v => v.id === formData.applyUserId)?.nickname || '' }}
      </el-form-item>
      <el-form-item label="联系方式:" prop="phone">
        {{ formData.phone }}
      </el-form-item>
      <el-form-item label="使用期限:" prop="useEndTime">
        {{ formatDate(formData.useEndTime) }}
      </el-form-item>
      <el-form-item label="使用理由:" prop="applyReson">
        {{ formData.applyReson }}
      </el-form-item>
      <el-form-item label="附件:" prop="file">
        <UploadFile
          v-model="formData.file"
          :limit="1"
          :file-size="200"
          disabled
        />
      </el-form-item>
      <el-divider content-position="left">数字资源</el-divider>
      <el-form-item prop="list" label-width="0">
        <div class="flex items-center justify-end" style="width: 100%;">
          <el-button
            type="primary"
            plain
            @click="handleExport"
            :loading="exportLoading"
            v-hasPermi="['dr:source-apply:export']"
          >
            <Icon icon="ep:download" class="mr-5px" /> 导出
          </el-button>
        </div>
        <el-table :data="formData.journalApplyDetails" :stripe="true" :show-overflow-tooltip="true">
          <!-- <el-table-column label="主键" align="center" prop="id" /> -->
          <el-table-column label="#" align="center" type="index" width="50" fixed="left" />
          <el-table-column label="封面" align="center" prop="mainImage">
            <template #default="scope">
              <el-image
                style="width: 44px; height: 44px;"
                :src="scope.row.mainImage"
                :preview-src-list="[scope.row.mainImage]"
                fit="cover"
              />
            </template>
          </el-table-column>
          <el-table-column label="期刊名称" align="center" prop="journalName" />
          <el-table-column label="期刊编号" align="center" prop="journalCode" />
          <el-table-column label="ISSN/ISBN" align="center" prop="sn" min-width="100px"/>
          <el-table-column label="出版社" align="center" prop="journalFrom" />
          <el-table-column label="语言" align="center" prop="language" />
          <el-table-column label="出版频率" align="center" prop="frequency">
            <template #default="scope">
              <dict-tag :type="DICT_TYPE.JOURNAL_FREQUENCY" :value="scope.row.frequency" /> 
            </template>
          </el-table-column>
          <el-table-column label="主题分类" align="center" prop="type">
            <template #default="scope">
              <dict-tag :type="DICT_TYPE.JOURNAL_TYPE" :value="scope.row.type" /> 
            </template>
          </el-table-column>
          <el-table-column label="出版年份" align="center" prop="publishYear" />
          <el-table-column label="期刊来源" align="center" prop="source">
            <template #default="scope">
              <dict-tag :type="DICT_TYPE.JOURNAL_SOURCE" :value="scope.row.source" />
            </template> 
          </el-table-column>
          <!-- <el-table-column label="订购来源" align="center" prop="orderSource" /> -->
          <!-- <el-table-column
            label="订购日期"
            align="center"
            prop="orderTime"
            :formatter="dateFormatter"
            width="180px"
          /> -->
          <el-table-column
            label="入库时间"
            align="center"
            prop="enterTime"
            :formatter="dateFormatter"
            width="180px"
          />
          <el-table-column
            label="更新时间"
            align="center"
            prop="updateTime"
            :formatter="dateFormatter"
            width="180px"
          />
          <el-table-column label="操作" align="center" min-width="60px" fixed="right">
            <template #default="scope">
              <el-button
                link
                type="primary"
                @click="openDetail(scope.row)"
                v-hasPermi="['dr:source:query']"
              >
                详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button
        type="primary"
        :disabled="!data.processInstanceId"
        @click="handleBpm"
      >流程图</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>

    <!-- 资源详情 -->
    <JournalDetail v-model:visible="detailVisible" :data="currentRow" />
  </Dialog>
</template>

<script setup lang="ts">
import { DICT_TYPE } from '@/utils/dict'
import { propTypes } from '@/utils/propTypes'
import { formatDate, dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download'
import { JournalVO } from '@/api/dr/journal'
import { JournalApplyApi, JournalApplyVO } from '@/api/dr/journalapply'
import { getSimpleUserList } from '@/api/system/user'

defineOptions({ name: 'JournalApplyDetail' })
const emit = defineEmits(['update:visible'])
const props = defineProps({
  visible: propTypes.bool.def(false),
  data: propTypes.object.def({}),
})
// 弹窗的是否展示
const dialogVisible = computed({
  get: () => props.visible,
  set: (val) => {
    emit('update:visible', val)
  },
})
const message = useMessage() // 消息弹窗
const router = useRouter() // 路由
// 弹窗的标题
const dialogTitle = ref('期刊利用查看')
const applyUserList = ref<any>([]) // 申请人列表
const formLoading = ref(false)
const exportLoading = ref(false) // 导出的加载中
const detailVisible = ref<boolean>(false)
const currentRow = ref<JournalVO>()

const	formData = ref<JournalApplyVO | any>({})
/** 导出按钮操作 */
const handleExport = async () => {
  try {
    // 导出的二次确认
    await message.exportConfirm()
    // 发起导出
    exportLoading.value = true
    const data = await JournalApplyApi.exportJournalApply({})
    download.excel(data, '期刊利用.xls')
  } catch {
  } finally {
    exportLoading.value = false
  }
}
// 详情弹窗
const openDetail = (row: any) => {
  currentRow.value = { ...row }
  detailVisible.value = true
}
// 流程图
const handleBpm = () => {
  router.push({
    name: 'BpmProcessInstanceDetail',
    query: {
      id: props.data.processInstanceId
    }
  })
}
const getDetail = () => {
  formLoading.value = true
  JournalApplyApi.getJournalApply(props.data.id).then((data) => {
    console.log('getDetail', data)
    formData.value = data
    formData.value.journalApplyDetails = data.journalDetails || []
  }).finally(() => {
    formLoading.value = false
  })
}
const getOptions = () => {
  getSimpleUserList().then(list => {
    // console.log('getSimpleUserList', list)
    applyUserList.value = list
  })
}
const open = () => {
  getDetail()
  getOptions()
}
</script>

<style lang="scss" scoped>
</style>
